import React from "react";
import { Form, Input, Button, Row, Col } from "antd";
import { createStyles } from "antd-style";
import { VerifiedOutlined, UserOutlined, LockOutlined, LoadingOutlined } from "@ant-design/icons";

import { useAccountLogin } from "./useAccountLogin";

const AccountLogin: React.FC = () => {
  const { styles } = useStyle();
  const { submitting, handleSubmit, form, captchaImageInfo, fetchCaptchaImage } = useAccountLogin();

  return <div className={styles.accountLogin}>
    <Form form={form}>
      <Form.Item
        name="loginName"
        rules={[{ required: true, whitespace: true, message: '请填写用户名或手机号!' }]}
      >
        <Input
          size="large"
          autoFocus={true}
          prefix={<UserOutlined />}
          placeholder="手机号"
          onKeyDown={handleSubmit}
        />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[{ required: true, whitespace: true, message: '请填写密码!' }]}
      >
        <Input.Password
          size="large"
          prefix={<LockOutlined />}
          placeholder="密码"
          onKeyDown={handleSubmit}
        />
      </Form.Item>
      <Form.Item
        name="code"
        rules={[{ required: true, whitespace: true, message: '请填写验证码!' }]}
      >
        <Row gutter={5} align="middle">
          <Col span={18}>
            <Input
              size="large"
              prefix={<VerifiedOutlined />}
              placeholder="验证码"
              onKeyDown={handleSubmit}
            />
          </Col>
          <Col span={6} style={{paddingTop: 6}}>
            <img src={captchaImageInfo.img}
              style={{ width: "100%", height: 37, cursor: "pointer" }}
              onClick={fetchCaptchaImage}
            />
          </Col>
        </Row>
      </Form.Item>
      <Form.Item>
        <Button
          size="large"
          type="primary"
          style={{ width: "100%" }}
          onClick={handleSubmit}
          icon={submitting && <LoadingOutlined />}
        >
          登录
        </Button>
      </Form.Item>
    </Form>
  </div>
}

export default AccountLogin;

const useStyle = createStyles(({ css }) => ({
  accountLogin: css`
    `
}))
